@import '../mixins';
@import '../variables';

.index {
	padding-bottom: 40px;

	.index-header {
		color: #fff;
		padding: 30px 0;
		text-align: center;
		background-image: url('/img/home-header-bg.jpg');
		background-size: cover;

		.index-top-navbar {
			@media (min-width: @screen-sm-min) {
				font-size: 16px;
			}

			.navbar-nav {
				float: none;
				vertical-align: top;
				display: inline-block;
				margin: 0;

				> li {
					float: left;

					> a {
						padding-top: 28px;

						@media (max-width: @screen-xs-max) {
							padding-left: 8px;
							padding-right: 8px;
						}
					}
				}
			}

			.navbar-brand {
				padding: 13px 0 0 0;
			}

			.btn {
				margin-top: 24px;
			}
		}

		h1 {
			font-size: 50px;
			line-height: 1.5;
		}

		.sub-level {
			font-size: 18px;
		}

		.index-search-input {
			height: 60px;
			border: none;
			font-size: 18px;
			background-color: #fff;
			color: #1c3a47;
			width: 600px;
			outline: none;
			padding: 20px;
			margin: 60px 0 120px;
			.placeholder(rgba(red(#1c3a47), green(#1c3a47), blue(#1c3a47), .7))
		}

		.navbar {
			margin-bottom: 80px;
		}

		.sub-level {
			margin-top: 40px;
		}
	}

	.header {
		position: relative;

		.affix {
			top: 0;
			left: 0;
			right: 0;
		}
	}

	.collection {
		&.affix {
			top: 60px;

			@media (max-width: @screen-xs-max) and (min-width: @grid-float-breakpoint) {
				top: 127px;
			}
		}
	}

	.index-projects {
		padding-top: 20px;
	}

	.index-show-more-projects {
		padding: 15px;
		text-align: center;
		color: #799d9c;
		font-weight: 600;
		font-size: 15px;
		background-color: #eef4f4;

		.fa {
			font-size: 4px;
			vertical-align: middle;

			& + .fa {
				margin-left: -10px;
			}
		}
	}
}
